<!--
 * @Author: your name
 * @Date: 2021-08-07 17:18:01
 * @LastEditTime: 2021-08-17 17:11:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Self\hrsaas-86\src\views\salarys\index.vue
-->
<template>
  <div class="salarys-container">
    <div class="app-container">
      <h2>
        工资
      </h2>
      <!-- <input v-if="isShow" type="text" ref="input" /> -->
      <!-- <button v-else @click="btnclick">点我切换显示输入框</button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'Salarys',
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    async btnclick() {
      this.isShow = true
      //  vue是异步Dom更新的,修改数据后,视图不会立刻更新,而是等同一事件循环中所有数据变化完成之后在进行更新
      //  不写$nexttick会报错
      // this.$nextTick(() => this.$refs.input.focus())
      // 由于$nexttick本身就是promise加上settimeout的封装,
      console.log(this.$nextTick()) //  是一个promise对象 所以可以使用async await简写
      await await this.$nextTick()
      this.$refs.input.focus()
    }
  }
}
</script>

<style></style>
